<template>
  <div class="score-list">
    <el-table :data="data" style="width: 100%">
      <el-table-column type="index" width="50" />
      <el-table-column prop="studentName" label="姓名">
      </el-table-column>
      <el-table-column prop="description" label="事件">
      </el-table-column>
      <el-table-column prop="score" label="分数" sortable width="150">
      </el-table-column>
      <el-table-column prop="time" label="处理时间">
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="current" :page-sizes="[12, 24, 36, 999]" :page-size="size" layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
  </div>
</template>

<script>
import api from "@/api";
import paginationHandler from "@/mixins/paginationHandler";

export default {
  mixins: [
    paginationHandler
  ],
  data() {
    return {
      current: 1,
      size: 12,
      pages: 0,
      total: 0,
      data: [],
    };
  },
  created() {
    this.updateTableData();
  },
  methods: {
    async updateTableData() {
      const { data } = await api.getEventRecords({
        size: this.size,
        current: this.current,
      });
      console.log(data);
      this.data = data.data.records.map(item => {
        return {
          ...item,
          time: new Date(item.time * 1000).toLocaleString()
        };
      });
      this.pages = data.data.pages;
      this.total = data.data.total;
    }
  }
};
</script>

<style lang="scss" scoped>
</style>
